import React, { useState, useEffect } from 'react'
import cn from 'classnames'
import i from '@/index.module.css';
import { Loading, Radio, Checkbox } from '@knownsec/react-component';
import BreadCrumb from '@/components/BreadCrumb';
import { drawLine } from '@/common/charts';
import { interfaceInfo } from '~/API/';
import { getSum } from '@/common/constant';
import s from './style.module.css'
import moment from 'moment';

export default function InterfaceFlow () {
  const [leftloading ,setLoadingl] = useState(true)
  const [rightloading ,setLoadingr] = useState(true)
  const [value1, setValue1] = useState(1)
  const [value2, setValue2] = useState(1)
  const [time, setTime] = useState('')
  const [group, setGroup] = useState([])
  useEffect(() => {
    setLoadingr(true)
    setLoadingl(true)
    const times = value1 ? 'week' : 'day'
    const times1 = value2 ? 'week' : 'day'
    const thArr = []
    group.forEach(item => {
      if (item?.value) {
        thArr.push(item.key)
      }
    })
    const data = {
      time: times,
      eth_range: thArr,
      rate_type: 'bps'
    }
    const data1 = {
      time: times1,
      eth_range: thArr,
      rate_type: 'pps'
    }
    interfaceInfo('POST', data).then(res => {
      setTime(res.data.last_time?moment(res.data.last_time).format('yyyy-MM-DD HH:mm:ss'):'')
      setLoadingl(false)
      if (!group.length) {
        const arr = res.all_eth.map(item => {
          return { key: item, value: true }
        })
        setGroup(arr)
      }
      const timeline = res.data.category
      const val = timeline.map((item, idx) => {
        const rxdict = res.data.rx[idx] || {}
        const txdict = res.data.tx[idx] || {}
        const total = getSum(Object.values(rxdict)) + getSum(Object.values(txdict))
        const itemList = []
        for (let i in rxdict) {
          itemList.push({ name: 'rx' + i, value: rxdict[i] })
        }
        for (let j in txdict) {
          itemList.push({ name: 'tx' + j, value: txdict[j] })
        }
        return {
          value: total,
          itemList: itemList
        }
      })
      drawLine(
      'bpschart', 
      { timeline: timeline, value: val },
      ['#11ab4e', '#fff'],
      '#11ab4e',
      'interface'
      )
    })
    interfaceInfo('POST', data1).then(res => {
      setLoadingr(false)
      const timeline = res.data.category
      const val = timeline.map((item, idx) => {
        const rxdict = res.data.rx[idx] || {}
        const txdict = res.data.tx[idx] || {}
        const total = getSum(Object.values(rxdict)) + getSum(Object.values(txdict))
        const itemList = []
        for (let i in rxdict) {
          itemList.push({ name: 'rx' + i, value: rxdict[i] })
        }
        for (let j in txdict) {
          itemList.push({ name: 'tx' + j, value: txdict[j] })
        }
        return {
          value: total,
          itemList: itemList
        }
      })
      drawLine(
      'ppschart', 
      { timeline: timeline, value: val },
      ['#11ab4e', '#fff'],
      '#11ab4e',
      'interface'
      )
    })
  }, [value1, value2, group])
  const getStatu = (val, type) => {
    setLoadingl(true)
    setLoadingr(true)
    const arr = []
    group.forEach(item => {
      if (item.key === type) {
        item.value = val.value
      }
      arr.push(item)
    })
    setGroup(arr)
  }
  const changeInterface = (e, d) => {
    if (d === 'l') {
      setValue1(e.target.value)
    } else {
      setValue2(e.target.value)
    }
  }
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '系统状态' },
          { link: '', name: '接口流量', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={s.bgc}>
          <div className={cn(i.p24, i.pr)}>
            <div className={cn(i.df, i.aic, i.jcsb)}>
              <div>
                {/* <svg
                  className={i.vam}
                  width="48px"
                  height="48px"
                  viewBox="0 0 48 48"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                >
                  <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="系统状态-接口流量" transform="translate(-184.000000, -171.000000)">
                      <g id="编组-7" transform="translate(184.000000, 171.000000)">
                        <circle
                          id="椭圆形备份-3"
                          stroke="#0B6FD6"
                          fill-opacity="0.1"
                          fill="#0B6FD6"
                          cx="24"
                          cy="24"
                          r="23.5"
                        ></circle>
                        <g id="3.Icon/2.业务安全类/流量" transform="translate(8.000000, 8.000000)">
                          <path
                            d="M11.4135982,6.74845299 C11.6642562,5.78402865 12.9907341,5.75455563 13.3165961,6.64313362 L16.845,21.156 L19.0615891,13.6640039 C19.3062654,12.836925 20.39523,12.6999095 20.8507502,13.3892645 L23.127,17.838 L28,17.8382813 L28,19.8382813 L22.5145517,19.8382813 C22.180407,19.8382813 21.8713538,19.6717104 21.6868576,19.399497 L20.268,16.635 L17.7083361,25.2886285 C17.4304887,26.2278357 16.1332859,26.2350613 15.8135964,25.3598657 L12.348,11.104 L10.2724693,19.0898283 C10.1674602,19.4938583 9.8243744,19.7860751 9.4171461,19.8319721 L4,19.8382813 L4,17.8382813 L8.53,17.838 L11.4135982,6.74845299 Z"
                            id="路径-24"
                            fill="#0B6FD6"
                            fill-rule="evenodd"
                          ></path>
                          <rect
                            id="矩形"
                            fill-rule="nonzero"
                            x="0"
                            y="0"
                            width="32"
                            height="32"
                          ></rect>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg> */}
                <span className={cn(i.vam)}>接口流量</span>
              </div>
              <div className={i.primaryColor}>
                <svg
                  className={i.vam}
                  width="14px"
                  height="16px"
                  viewBox="0 0 14 16"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                >
                  <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="系统状态-系统负载" transform="translate(-1104.000000, -203.000000)">
                      <g id="编组-6" transform="translate(1101.000000, 201.000000)">
                        <g id="icon/操作编辑类/刷新">
                          <path
                            d="M12.9826943,2.27133848 L14.8576943,5.51893375 L11.610099,7.39393375 L10.985099,6.31140199 L12.0676308,5.68640199 C12.1495439,5.63910944 12.2240794,5.5839458 12.2908334,5.52241801 C11.5772839,5.20332177 10.8016419,5.03623948 10,5.03623948 C6.89339828,5.03623948 4.375,7.55463776 4.375,10.6612395 C4.375,13.7678412 6.89339828,16.2862395 10,16.2862395 C13.0511267,16.2862395 15.5348696,13.8569809 15.6226018,10.8270909 L15.625,10.6612395 L16.875,10.6612395 C16.875,14.4581971 13.7969577,17.5362395 10,17.5362395 C6.20304235,17.5362395 3.125,14.4581971 3.125,10.6612395 C3.125,6.86428183 6.20304235,3.78623948 10,3.78623948 C10.9431705,3.78623948 11.8419814,3.97616507 12.6602741,4.31985738 C12.633225,4.20364706 12.5884339,4.08845946 12.5251625,3.97887024 L11.9001625,2.89633848 L12.9826943,2.27133848 Z"
                            id="路径"
                            fill="#999EA8"
                            fill-rule="evenodd"
                          ></path>
                          <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
                <span className={cn(i.vam, i.ml10)}>最近更新时间:{time}</span>
                <span className={cn(i.ml20, i.vam)}></span>
              </div>
            </div>
            <div className={cn(s.df, s.aic, i.mt20)}>
              <div className={s.cbox}>
                {group.map((item, index) => (
                  <div className={cn(i.dib, i.pr10)}>
                    <Checkbox
                      key={index}
                      children={item.key}
                      checked={item.value}
                      onChange={(val) => getStatu(val, item.key)}
                    />
                  </div>
                ))}
              </div>
            </div>
            <div className={cn(s.pt40, i.df, i.aic, i.jcsb)}>
              <div className={cn(s.f1, s.h350, i.p24, i.pr)}>
                <Loading show={leftloading} label="" />
                <div className={cn(i.df, i.aic, i.jcsb)}>
                  <span className={i.primaryColor}>接口速率(bps)</span>
                  <div className={s.radios}>
                    <Radio.Group onChange={(e) => changeInterface(e, 'l')} value={value1}>
                      <Radio value={0}>近24小时</Radio>
                      <Radio value={1}>近一周</Radio>
                    </Radio.Group>
                  </div>
                </div>
                <div className={s.h250} id="bpschart"></div>
              </div>
              <div className={cn(i.ml24, s.f1, s.h350, i.p24, i.pr)}>
                <Loading show={rightloading} label="" />
                <div className={cn(i.df, i.aic, i.jcsb)}>
                  <span className={i.primaryColor}>包转发速率(pps)</span>
                  <div className={s.radios}>
                    <Radio.Group onChange={(e) => changeInterface(e, 'r')} value={value2}>
                      <Radio value={0}>近24小时</Radio>
                      <Radio value={1}>近一周</Radio>
                    </Radio.Group>
                  </div>
                </div>
                <div className={s.h250} id="ppschart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}